<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css盒模型</title>
</head>
<body>
	<p>
		`css盒模型：
		<hr>
			基本概念：标准模型和IE模型<br>
			标准模型和IE模型<br>
			css如何设置这两种盒模型
			<br>
			js如何获取对应和模型的宽和高`
			<br>
			根据盒模型解释“边距重叠”
			<br>
			BFC（边距重叠解决方案）
			<hr>
			答：<br>
					标准模型：（content）（width、height） + padding + border + margin<br>
					IE模型：（content + padding + border）（width、height） + margin<br>
					css: box-sizing: content-box(标准模型，默认)<br>
								box-sizing: border-box(IE模型)<br>
					js如何获取对应和模型的宽和高:<br>
									DOM.style.width/height (只能元素的内联样式的宽和高)<br>
									DOM.currentStyle.width/height (无论是内部样式还是外链的样式，都是获取渲染后的元素的宽和高，但是只有IE支持)<br>
									window.getComputedStyle(DOM).width/height (无论是内部样式还是外链的样式，都是获取渲染后的元素的宽和高，但是比上面的兼容性好，支持大多数浏览器)<br>
									DOM.getBoundingClientRect().top/bottom/left/right/width/height (拿到的数据更全面)<br>

			<hr>
			<h1>元素边距重合(垂直方向的margin会重合)---overflow: hidden;触发BFC /* 解决边距重叠 */</h1>
			<h1>BFC（block formating context）块级格式化上下文</h1>
			<h1>1.---overflow: hidden;触发BFC /* 解决边距重叠 */即创建BFC，（overflow不为visible就行，是hidden或auto都行）</h1>
			<h1>2.设置浮动也可以创建一个BFC-来解决上下边距重叠问题-即float不为none来创建BFC，（因为浮动元素的宽高也会被BFC计算进去）
			</h1>
			<h1>3.position：不为relative或默认的static也可创建BFC，来解决边距重合问题</h1>
			<style>
				.parent{
					width: 100px;
					background: red;
					overflow: hidden; /* 解决边距重叠 */
				}
				.child{
					width: 100px;
					height: 100px;
					margin: 10px 10px 10px 0;
					background: yellow;
				}
			</style>
			<div class="parent">
				<div class="child"></div>
			</div>
			<h1>BFC-块级格式化上下文(边距重叠解决方案)</h1>

	</p>

	<hr>
	<h3>BFC（block formating context）块级元素格式化上下文 即 解决元素内部垂直方向的margin边距重合的解决方案</h3>
	<h4>下面是BFC的应用实例</h4>
	<h5 style="color: red">1.利用BFC实现常见的float布局</h5>
	<style>
		.bfc_layout{
			background: red;
		}
		.bfc_layout .left{
			float: left;
			width: 100px;
			height: 100px;
			background: pink;
		}
		.bfc_layout .right{
			background: #000;
			height: 110px;
			overflow: auto;
		}
	</style>
	<div class="bfc_layout">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<p>因为BFC元素特性：不会与float元素重合，所以利用这个特性给右侧元素加上BFC,
		那么他就不会和左侧重合了（overflow：不为visible ,auto和hidden都可以）</p>
	
	<h5 style="color: red">2.利用BFC来解释“清除浮动”</h5>
	<h6 style="color: red">
		这个利用了BFC另一个特性：BFC元素会把自己的已经浮动的子元素的高度来计算自己的高度，这就是清除浮动的原理解释<br>
		然而：创建BFC方式有三：
		1、overflow不为默认的visible就行，是hidden或auto都行
		2. float 不为默认的none来实现浮动，
		3. position：不为relative或默认的static也可创建BFC，来解决边距重合问题
	</h6>
	<style>
		.bfc_float {
			background: red;
			/* overflow: hidden; */
			overflow: auto;
			/* position: absolute; */
			/* float: left; */
		}
		.bfc_float .child1{
			height: 200px;
			float: left;
		}
	</style>
	<div class="bfc_float">
		<div class="child1">
			利用BFC来解释“清除浮动”
		</div>
	</div>
</body>
</html>